<template>
  <div class="days">
     <el-form :inline=true>
       <el-form-item>
         <el-select v-model="planForm.deptId" placeholder="选择科室" clearable class="input">
          <!--:value 绑定定义了当该选项被选中时，应该传递给父组件的值。在这里，它绑定到 item.id，
               这意味着当你选择一个选项时，el-select 的 v-model 会被设置为该选项的 id。 -->
           <el-option
              v-for="(item,index) in allDept"
              :key="index"
              :value="item.id"
              :label="item.name"
           ></el-option>
         </el-select>
       </el-form-item>

       <el-form-item>
         <el-date-picker
             :clearable="false"
             type="date"
             placeholder="出诊日期"
             class="input"
             style="width: 100%"
             v-model="planForm.startDate"
             value-format="YYYY-MM-DD"
         />
       </el-form-item>

       <el-form-item>
           <el-input v-model="planForm.doctorName" clearable class="input" placeholder="医生姓名"></el-input>
       </el-form-item>

       <el-form-item>
         <el-button type="primary" @click="queryPlan">查询</el-button>
         <el-button type="primary" @click="openDialog">新增</el-button>
       </el-form-item>

     </el-form>

    <!-- header-cell-style 设置表头背景颜色-->
    <el-table
      border
      style="width: 100%"
      :header-cell-style="{'background-color':'#e0e0e0'}"
      :data="tableData"
    >
      <el-table-column align="center" type="index" width="100" label="序号"> </el-table-column>
      <el-table-column
          min-width="170"
          label="诊室名称"
          prop="deptSubName"
          align="center"
      >
      </el-table-column>
      <!-- 时间日期列 -->
      <el-table-column
          min-width="170"

          v-for="(item,index) in dateList"
          :key="index"
          :label="item"
          :prop="'day'+index"
          align="center"

      >
        <template #default="scope">
          <div
              class="content"
              :class="scope.row.plan[scope.cellIndex-2].doctors.length>3?'alignStyle':''"
              @dblclick="viewWorkPlanHandle(scope)"
          >
            {{ scope.row.plan[scope.cellIndex-2].doctors.join(",") }}
          </div>
        </template>
      </el-table-column>


    </el-table>
    <!-- ref 获取子组件实例对象 -->
    <DaysAdd ref="daysAddRef" @queryPlan="queryPlan"></DaysAdd>
  </div>
</template>

<script setup>
import {reqPlan} from '@/api/visit';
import {reactive, ref,onMounted} from "vue";
import {reqDept} from "@/api/dept";
import DaysAdd from './daysAdd/index.vue';
import {useRouter} from "vue-router";
// dayjs 插件
import dayjs from 'dayjs'



let daysAddRef = ref()

// 显示子组件中的对话框
const openDialog = ()=>{
  daysAddRef.value.dialogVisible = true;
}


// router 实例对象 控制路由跳转
let router = useRouter();

// 双击医生出诊表跳转
const viewWorkPlanHandle = (scope) => {
  console.log(scope);
  router.push(`/visit/doctorfees/${scope.row.deptName}/${scope.row.deptSubId}/${scope.row.plan[scope.cellIndex - 2].date}`);

};





let newDate = new Date('2024-04-08')

let planForm = reactive({
  "startDate":dayjs().format('YYYY-MM-DD'),  // 开始日期
  "endDate": "",      // 结束日期  (开始日期 - 7)
  "deptId": "",            // 部门id
  "doctorName": ""    // 医生姓名
})

// 渲染table 表格表头日期元素
let dateList = ref([]);

// 渲染table 表格源数据
let tableData = ref([])

// 查询计划的方法
const queryPlan = async () => {
  // 每次查询之前 根据当前选中的开始日期 生成 endDate 的时间
  planForm.endDate = dayjs(planForm.startDate).add(7,'day').format("YYYY-MM-DD")
  let res = await reqPlan(planForm);
  console.log(res);
  dateList.value = res.dateList
  // console.log(dateList)  // 获取到的7天日期

  // 将服务端返回的数据进行格式的修改
  res.result.forEach(item=>{
    item.plan.forEach((itm,idx)=>{
      item['day'+idx] = itm.doctors
    })
  })
  tableData.value = res.result;
  // console.log(tableData.value)

};

// 所有科室数组
let allDept = ref([])

// 获取所有科室
const queryDepts = async ()=>{
  let res = await reqDept();
  console.log(res)
  allDept.value = res.result
}

// 页面初始化时 接受参数
onMounted(()=>{
  // 页面初始化的时候调用 queryPlan
  queryPlan();
  queryDepts();
})
</script>

<style lang="scss" scoped>

//
.content {
  width: 100%;
  height: 23px;
}
.alignStyle {
  text-align: left;
}
</style>